<template>
  <view class="list">
    <view style="width:90%;margin:auto;padding-top:20px;position: relative;padding-top:80px;">
      <u-search shape="round" :show-action="false" placeholder="阳澄湖大螃蟹"></u-search>
    </view>
    <button style="border-radius: 20px;width:65px;height:28px;line-height:28px;
		font-size:15px;background-color: #49BA7C;color:white;position: absolute;
		top:81px;right:22px;">搜索</button>
    <!-- 宫格布局 -->
    <view class="title">
      <u-grid :col="5" :border="false">
        <u-grid-item>
          <image src="../../static/香蕉.png" style="background-color:#FCDF87;
					padding:8px;border-radius: 50%;width:30px;height:30px;">
          </image>
            <view class="grid-text">水果</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/生鲜-蔬菜4.png" style="background-color:#AFDC66;
					padding:8px;border-radius: 50%;width:30px;height:30px;">
          </image>
            <view class="grid-text">蔬菜</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/生鲜-肉类3.png" style="background-color:#FFBAB5;
					padding:8px;border-radius: 50%;width:30px;height:30px;">
          </image>
            <view class="grid-text">肉类</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/海鲜.png" style="background-color:#F1E763;
					padding:8px;border-radius: 50%;width:30px;height:30px;">
          </image>
            <view class="grid-text">海鲜</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/生鲜-熟食4.png" style="background-color:#F9C78E;
					padding:8px;border-radius: 50%;width:30px;height:30px;">
          </image>
            <view class="grid-text">熟食</view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 分类主体 -->
    <view class="content">
      <view class="con1">
        <button v-for="(item,index) in button" :key="index" @click="changeCurrent(index)"
          style="height:40px">{{item.name}}</button>
      </view>
      <view class="con2">
        <swiper vertical="true" disable-touch="true" :current="current" style="height:500px;">
          <swiper-item>
            <view>
              <image src="../../static/新鲜到家.jpg" style="width:100%;
              height:80px;border-radius:10px;"></image>
            </view>
            <view>
              <view style="border-radius: 10px;display: flex;border:1px solid #B8B8B8" v-for="(item,index) in fresh"
                :key="index">
                <view>
                  <image :src="item.image" style="width: 90px;height:90px;padding-top:8px;"></image>
                </view>
                <view style="padding:10px;">
                  <text style="font-weight: bold;font-size:13px">{{item.text1}}</text><br />
                  <text style="color:#B8B8B8;font-size:10px;">{{item.text2}}</text><br />
                  <text style="border:2px solid #EE9354;font-size:10px;
                  color:#EE9354;border-radius: 5px;padding:0 5px 0 5px;">{{item.text3}}</text><br />
                  <text><text style="color:#EE8C48;font-weight: bold;">{{item.price}}</text>
                    /<text style="color:#9F9F9F"></text>{{item.single}}</text>
                </view>
                <view style="color:white;
                background-color: #E8865F;
                font-weight: bold;
                font-size:12px;
                padding:2px 5px 5px 5px;
                border-top-left-radius:10px;
                border-bottom-right-radius:10px;
                position: absolute;">今日疯抢</view>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">无</view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        button: [{
            name: "推荐"
          },
          {
            name: "热销爆款"
          },
          {
            name: "新品"
          },
          {
            name: "绿叶菜"
          },
          {
            name: "番茄"
          },
          {
            name: "茄果"
          },
          {
            name: "玉米"
          },
          {
            name: "花菜"
          },
          {
            name: "豆制品"
          },
          {
            name: "菌菇"
          },
          {
            name: "有机蔬菜"
          },
          {
            name: "进口蔬菜"
          },
        ],
        fresh: [{
            image: "../../static/蔬菜1.jpg",
            text1: "优质青菜",
            text2: "基地直供 | 绿色配置 | 新鲜采摘",
            text3: "基地直采",
            price: "￥9.98",
            single: "斤"
          },
          {
            image: "../../static/蔬菜2.jpg",
            text1: "高山精选本地生菜",
            text2: "基地直供 | 绿色配置 | 新鲜采摘",
            text3: "高山有机",
            price: "￥5.9",
            single: "斤"
          },
          {
            image: "../../static/蔬菜3.jpg",
            text1: "优质小白菜",
            text2: "基地直供 | 绿色配置 | 新鲜采摘",
            text3: "主食必备",
            price: "￥3.79",
            single: "斤"
          },
          {
            image: "../../static/蔬菜4.jpg",
            text1: "优质苦瓜",
            text2: "基地直供 | 绿色配置 | 新鲜采摘",
            text3: "多汁美味",
            price: "￥10.47",
            single: "斤"
          }
        ]
      }
    },
    methods: {
      changeCurrent(index) {
        // console.log(index)
        this.current = index
      }
    }
  }
</script>

<style lang="scss">
  .list {
    .title {
      width: 90%;
      margin: auto;
    }

    .content {
      width: 90%;
      margin: auto;
      display: flex;
      justify-content: space-between;

      .con1 {
        width: 24%;
        border-radius: 10px;

        button {
          font-size: 13px;
          color: #9A9A9A;
          background-color: #FAFAFA;
        }
      }

      .con2 {
        width: 74%;
        height: 100%;
      }
    }
  }
</style>